import { defineComponent, PropType, reactive, ref } from 'vue';
import { MainLayouts } from '../layouts/MainLayouts';
import { Button } from '../shared/Button';
import { Form, FormItem } from '../shared/Form';
import { Icon } from '../shared/Icon';
import { validate } from '../shared/validate';
import s from './SignInPage.module.scss';
import logo from '../assets/icons/logo.png';
import axios from 'axios';
export const SignInPage = defineComponent({
    props: {
        name: {
            type: String as PropType<'add' | 'pig'>
        }
    },
    setup: (props, context) => {
        const formData = reactive({
            email: "",
            code: ''
        })
        const errors = reactive({
            email: [],
            code: []
        })
        const onSubmit = (e: Event) => {
            e.preventDefault()
            Object.assign(errors, {//清空
                email: [],
                code: []
            })
            const newErrors = validate(formData, [//校验
                { key: 'email', type: 'required', message: '必填' },
                { key: 'email', type: 'pattern', regex: /.+@.+/, message: '必须是邮箱地址' },
                { key: 'code', type: 'required', message: '必填' }
            ])
            Object.assign(errors, newErrors)
        }
        const onClickSendValidationCode = async () => {
            const response = await axios.post('/api/v1/validation_codes', { email: formData.email })
        }
        return () => (
            <MainLayouts>{{
                title: () => "登录",
                icon: () => <Icon name="left" />,
                default: () => <>
                    <div class={s.wrapper}>
                        <div class={s.clack}>
                            <img src={logo} alt="" />
                            <h1>山竹记账</h1>
                        </div>
                        <Form onSubmit={onSubmit}>
                            <FormItem label='邮箱地址' type='text' v-model={formData.email} error={errors.email?.[0] ?? " "}
                                placeholder='请输入邮箱然后点击发送验证码' />

                            < FormItem label='验证码' type='validationCode' class={s.yan}
                                onClick={onClickSendValidationCode}
                                v-model={formData.code} error={errors.code?.[0] ?? ' '}
                                placeholder='六位验证码' />
                            <FormItem class={s.sign}>
                                <Button>登录</Button>
                            </FormItem>
                        </Form>
                    </div>
                </>
            }
            }</MainLayouts >
        )
    }
})